*{
    /* 初始化 取消页面元素的内外边距 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 径向渐变背景 */
    background: radial-gradient(circle at center,#6b98bb,#000);
}
.radar{
    width: calc(256px + 48px);
    height: calc(256px + 48px);
    border: 1px solid;
    background: 
        /* 重复的径向渐变 圈圈 */
        repeating-radial-gradient(
            transparent 0,
            transparent 30px,
            darkcyan 30px,
            darkcyan 32px
        ),
        /* 线性渐变 中间横线 */
        linear-gradient(
            transparent 49.75%,
            darkcyan 49.75%,
            darkcyan 50.25%,
            transparent 50.25%
        ),
        /* 线性渐变 中间竖线 */
        linear-gradient(
            90deg,
            transparent 49.75%,
            darkcyan 49.75%,
            darkcyan 50.25%,
            transparent 50.25%
        ),
        /* 线性渐变 背景 */
        linear-gradient(#000,#000)
    ;
    border-radius: 50%;
    /* 相对定位 */
    position: relative;
}
.radar::before{
    content: "";
    /* 绝对定位 */
    position: absolute;
    width: calc(256px / 2);
    height: calc(256px / 2);
    background: linear-gradient(
        45deg,
        rgba(0,0,0,0) 50%,
        rgba(0,255,255,1) 100%)
    ;
    border-radius: 100% 0 0 0;
    top: calc(48px / 2);
    left: calc(48px / 2);
    /* 执行动画：动画名称 时长 线性的 无限次播放 */
    animation: scanning 5s linear infinite;
    /* 设置旋转元素的基点位置 */
    transform-origin: 100% 100%;
}

/* 定义动画 */
@keyframes scanning {
    to{
        transform: rotate(360deg);
    }
}